<template>
	<view class="message">
		<view class="nav">
			<view @click="getsel(index)" :class="index==selNav?'nav-item hover':'nav-item'" v-for="(item,index) in navList" :key="index">
				<text>{{item.itemName}}</text>
			</view>
			<view class="numAbsolute" v-if="noWaitNum > 0">{{noWaitNum}}</view>
		</view>
		<view class="content">
			<view v-for="(item,index) in pageResult.list" :key="index" class="line">
				<view class="defaultInfo"  @click="clickFun(index)">
					<view class="dot" v-if="item.isRead==0"></view>
					<view class="title">{{item.title}}</view>
					<view class="time">{{item.create_time}}</view>
					<view class="infoIcon">
						<image :src="obtainImgUrl(openStateList[index] ? 'icon/retract.png' : 'icon/open.png')"></image>
					</view>
				</view>
				<view class="appentInfo"  v-if="openStateList[index]">
					{{item.content}}
				</view>
			</view>
		</view>
		<view class="bottom" style="z-index: 10;" v-if="noWaitNum > 0">
			<view class="btn" @click="readAll()">全部已读</view>
		</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				navList: [
				   {"itemId": "0", "itemName" : "全部"},
				   {"itemId": "1", "itemName" : "未读"},
				   {"itemId": "2", "itemName" : "已读"},
				],
				selNav : 0,
				noWaitNum: 0,
				pageParam: {
					type: 0,
					page: 0,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				},
				openStateList: [],
			}
		},
		methods: {
			getsel(index) {
				this.selNav = index;
				let item = this.navList[index];
				this.pageParam.type = item.itemId;
				this.pageParam.page = 0;
				this.pageResult.list = [];
				this.openStateList = [];
				this.getList();
			},
			getInfo(){
				serve.request({
					url: '/member/message/no-read-num',
					data: {}
				}).then(res => {
					this.noWaitNum = res.data;
				});
			},
			getList() {
				var self = this;
				self.pageParam.page++
				serve.request({
					url: '/member/message/list',
					data: self.pageParam
				}).then(res => {
					if (res.data && res.data.length > 0) {
						self.pageResult.list = self.pageResult.list.concat(res.data);
						let nowStateNum = self.openStateList.length;
						res.data.forEach((i, k) => {
							let newK = Number(nowStateNum) + Number(k);
							self.openStateList[newK] = 0;
						});
					}
					self.pageResult.isEmpty = self.pageResult.list.length == 0;
					self.pageResult.isEnd = res.data.length == 0; 
				});
			},
			clickFun(key) {
				var self = this;
				self.openStateList[key] = self.openStateList[key] ? 0 : 1;
				console.info(self.openStateList[key]);
				if(self.openStateList[key] == 1) {
					var item = self.pageResult.list[key];
					if(item.isRead == 0) {
						serve.request({
							url: '/member/message/set-read',
							data: {
								type: 0,
								id: item.id
							}
						}).then(res => {
							if(res.code == 200) {
								self.pageResult.list[key].isRead = 1;
								self.noWaitNum--;
							}
						});
					}
				}
				self.$forceUpdate();
				return ;
			},
			readAll() {
				var self = this;
				uni.showModal({
					title: '温馨提示',
					content: '您确定全部未读信息设置已读吗',
					success: function (res) {
						if (res.confirm) {
							serve.request({
								url: '/member/message/set-read',
								data:{
									type:1,
								}
							}).then(res => {
								self.noWaitNum = 0;
								self.getsel(self.selNav);
							});
						} 
					}
				});
			},
			obtainImgUrl(imgUrl) {
				return serve.imgUrl()+imgUrl;
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
			this.getInfo();
			this.getList();
		},
		onPullDownRefresh() {
			this.getInfo();
			this.getList();
		},
		onReachBottom() {
			if(this.pageResult.isEnd ||this.pageResult.isEmpty){
				return
			}
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.message {
		width: 100%;
		
		.nav {
			box-sizing: border-box;
			padding: 40rpx 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx rgba(60, 72, 104, 0.1) solid;
			position: relative;
		
			.nav-item {
				height: 32rpx;
				padding: 0rpx 10rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(39, 52, 88, 0.5);
				border-bottom: 8rpx rgba(243, 204, 91, 0) solid;
			}
		
			.hover {
				border-bottom: 8rpx rgba(243, 204, 91, 1) solid;
				color: rgba(39, 52, 88, 1);
			}
			
			.numAbsolute {
				position: absolute;
				top: 22rpx;
				right: 40%;
				border: 1rpx solid #ff0000;
				background-color: #ff0000;
				color: #ffffff;
				border-radius: 50%;
				width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				text-align: center;
				font-size: 26rpx;
			}
		}
		.bottom {
			z-index: 100;
			position: fixed;
			width: 100%;
			bottom: 0upx;
			border-top: 1upx rgba(235, 236, 240, 1) solid;
			align-items: center;
			display: flex;
			box-sizing: border-box;
			height: 120upx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 1px 0px 0upx rgba(235, 236, 240, 1);
			padding-left: 30upx;
			font-size: 24upx;
			color: rgba(60, 72, 104, 0.5);
			padding-bottom: env(safe-area-inset-bottom);    
			padding-top: 20rpx;
		
			.btn {
				position: absolute;
				height: 100%;
				width: 100%;
				background: rgba(235, 89, 56, 1);
				line-height: 100upx;
				text-align: center;
				font-size: 28upx;
				font-weight: bold;
				color: rgba(255, 255, 255, 1);
				top: 0;
				right: 0;
			}
		}
		.content {
			padding: 10rpx;
			.line {
				padding: 20rpx;
				border: 1rpx solid #ccc;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				
				.defaultInfo {
					display: flex;
					justify-content: space-between;
					position: relative;    
					align-items: center;
					
					.dot {
						position: absolute;
						top: 24upx;
						left: -5upx;
						width: 14upx;
						height: 14upx;
						background: rgba(235, 89, 56, 1);
						border-radius: 50%;
					}
					.title {
						margin-left: 10rpx;
						width: 60%;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.time {
						
					}
					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
				.appentInfo {
					margin-top: 20rpx;
				}
			}

		}
	}
</style>
